<template>
  <el-dialog v-loading="loading" :title="title" :visible.sync="show" width="780px" append-to-body :close-on-press-escape="false" :close-on-click-modal="false">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="95px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入公告标题" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公告类型" prop="msgType">
            <el-select v-model="ruleForm.msgType" placeholder="请选择公告类型">
              <el-option
                v-for="dict in message_type"
                :key="dict.value"
                :label="dict.label"
                :value="+dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接收者类型" prop="type">
            <el-select v-model="ruleForm.type" clearable @change="onUserType" placeholder="请选择接收者">
              <el-option
                v-for="item in notice_type"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.type !== '9999'">
          <el-form-item label="接收者" prop="receiver">
            <el-select v-model="ruleForm.receiver" clearable filterable placeholder="请选择接收者">
              <el-option
                v-for="item in userList"
                :key="item.value"
                :label="item.label"
                :value="+item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="syncLogi">
            <el-checkbox v-model="ruleForm.syncLogi">同步物流服务商</el-checkbox>
          </el-form-item>
        </el-col>
<!--        <el-col :span="24">-->
<!--          <el-form-item label="是否发布" prop="status">-->
<!--            <el-switch v-model="ruleForm.status" :inactive-value="0" :active-value="1"></el-switch>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="24">
          <el-form-item label="内容" prop="content">
            <editor class="editor" v-model="ruleForm.content" :min-height="192"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addNotice, getNotice, updateNotice } from '@/api/system/notice'
import { customerList } from '@/api/customer/myCustomer'
import { listUser } from '@/api/system/user'
import { listRole } from '@/api/system/role'
import { listDept } from '@/api/system/dept'

export default {
  props: {
    message_type: {
      type: Array,
      default: () => []
    },
    sys_notice_status: {
      type: Array,
      default: () => []
    },
    sys_notice_type: {
      type: Array,
      default: () => []
    },
    notice_type: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: '',
      show: false,

      loading: false,

      ruleForm: {
        level: 0,  // 紧急程度
        msgType: '',  // 消息类型
        receiver: '', // 接受者
        type: '9999', // 接收者类型, 默认第一个
        // status: 0, // 发布状态，0为未发布，1为发布
        title: '', // 标题
        content: '',  // 描述
        bizSys: 'boss', // 物流系统公告
        syncLogi: true,
      },

      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        msgType: [
          { required: true, message: '请选择消息类型', trigger: 'change' }
        ],
        receiver: [
          { required: true, message: '请选择接收者', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择接收者类型', trigger: 'change' }
        ]
      },

      userList: [],
      roleList: [],
      deptList: []

    }
  },
  methods: {
    // 监听接收者类型
    onUserType(e) {
      this.ruleForm.receiver = ''
      this.$refs.ruleForm.clearValidate(['receiver'])

      this.getSearchUserList(e)
    },

    /**
     * 获取用户,角色，部门列表
     * 1：用户列表
     * 2: 角色列表
     * 4: 部门列表
     * */
    getSearchUserList(type) {
      if (type === '9999') return

      const params = {
        1: listUser,
        2: listRole,
        4: listDept,
      }[type]

      params({
        pageSize: 1000,
        pageNum: 1
      }).then(res => {
        const list = res.rows || res.data
        this.userList = list.map(item => {
          return {
            label: item.userName || item.roleName || item.deptName,
            value: item.userId || item.roleId || item.deptId
          }
        })
      })
    },

    open(row) {
      this.show = true
      this.title = row ? '编辑公告' : '新增公告';

      if (!row) return this.getSearchUserList(this.ruleForm.type)

      this.loading = true
      getNotice({
        id: row.id
      }).then(response => {
        const { data } = response
        this.loading = false
        this.ruleForm = {
          level: 1,  // 紧急程度
          msgType: +data.msgType,  // 消息类型
          receiver: +data.receiver, // 接受者
          status: data.status || 0, // 发布状态，0为未发布，1为发布
          title: data.title, // 标题
          content: data.content,  // 描述
          id: data.id,
          type: data.type,
          syncLogi: data.syncLogi === 1,
          bizSys: 'boss',
        }
        this.getSearchUserList(this.ruleForm.type)
      }).catch(err => {
        this.loading = false
      })
    },

    close(e) {
      this.show = false
      this.$refs.ruleForm.resetFields()

      e === true && this.$emit('close')
    },

    // 提交
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true

          let params = this.ruleForm
          params.syncLogi = params.syncLogi ? 1 : 0
          if (this.ruleForm.id) {
            updateNotice(this.ruleForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.loading = false
              this.close(true)
            }).catch(() => {
              this.loading = false
            });
          } else {
            addNotice(this.ruleForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.loading = false
              this.close(true)
            }).catch(() => {
              this.loading = false
            });
          }
        }
      });
    }

  }
}
</script>

<style scoped lang="scss">
.el-input {
  width: 217px;
}
.editor {
  width: 585px;
}
</style>
